<template name="dateScroll">
	<view class="dateBox">
		<view class="dateYear">
			<text class="month">{{ month }}</text>
			<text class="year">月/{{ year }}年</text>
			<text class="toNow" @tap="toNow">回到今天</text>
		</view>
		<scroll-view :scroll-x="true" style="padding: 0 40upx;box-sizing: border-box;" :scroll-into-view="scId"  @scroll="scDate">
			<view class="dateScrollCnt" v-if="isShow">
				<block v-for="(item, index) in weekList">
					<view class="scrollItem" @tap="dateTap(index)" :key="index" :id="'item-'+item.month+'-'+item.date">
						<text class="week">{{ weekFmt[item.week] }}</text>
						<text class="day" :class="[item.isTap ? 'selectDate' : '']">{{ item.date }}</text>
						<block v-if="item.isNow>=0 && item.hasClass">
							<view class="dotted hasCheck" ></view>
						</block>
						<block v-else-if="item.isNow<0 && item.hasClass">
							<view class="dotted passCheck" ></view>
						</block>
						<block v-else>
							<view class="dotted" ></view>
						</block>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>

</template>

<script>
import TL from '@/common/tool.js';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	name: 'dateScroll', //组件名称
	props:{
		rollRule:{
			type:Object,
			default:{}
		}
	},
	// 组件参数
	data() {
		return {
			isShow: true,
			weekFmt: ['周一', '周二', '周三', '周四', '周五', '周六','周日'],
			weekList: [],
			choseDate: '',
			date: 0,
			scLeft:500,
			scId:'',
			month:0,
			year:0,
		};
	},
	watch:{
		rollRule(newVal){
			this.getWeekList()
		}
	},
	// 组件方法
	methods: {
		// 初始星期日期加载
		getWeekList() {
			this.weekList=[];
			let _sltDate = new Date();
			let _week = _sltDate.getDay()==0?6:(_sltDate.getDay()-1);
			this.year=_sltDate.getFullYear();
			this.month=_sltDate.getMonth()+1;
			this.date = _sltDate.getDate();
			for (let i = (-14-_week); i < (35-14-_week); i++) {
				let _obj = { week: 0, date: 0,weekNum:0, isTap: false,isNow:0,month:0,year:0,hasClass:false,fullDate:''};
				let _newDate = new Date(_sltDate.getTime() + (1000 * 60 * 60 * 24 * i));
				_obj.fullDate=TL.datePattern(_newDate,'yyyy-MM-dd');
				_obj.year = _newDate.getFullYear();
				_obj.month = _newDate.getMonth()+1;
				_obj.date = _newDate.getDate();
				_obj.week = _newDate.getDay()==0?6:(_newDate.getDay()-1);
				_obj.isTap = i==0?true:false;
				_obj.weekNum = Math.floor((i+_week)/7);
				_obj.isNow = i;
				this.weekList.push(_obj);
			}
			this.weekList.forEach((x,i)=>{
				if(this.rollRule[x.weekNum.toString()].length>0){
					this.rollRule[x.weekNum.toString()].forEach((m,n)=>{
						if(!this.weekList[i].hasClass){
							this.weekList[i].hasClass= m.data.some((z,y)=>{
								return TL.dateStrToNum(x.fullDate)>=TL.dateStrToNum(z.startDate) && (z.weekNum-1)==x.week && (!z.endTime || (z.endTime && TL.dateStrToNum(x.fullDate)<=TL.dateStrToNum(z.endTime)))
							})
							
						}
						
						
						
					})
				}
				
			})
			
			setTimeout(()=>{
				
				let _acDate=new Date(_sltDate.getTime()-(1000 * 60 * 60 * 24 * _week));
				this.scId='item-'+(_acDate.getMonth()+1)+'-'+_acDate.getDate()
				uni.hideLoading()
			},500)
		},
		//点击日期
		dateTap(e) {
			e=parseInt(e)
			this.weekList.forEach((x, i) => {
				if (i == e) {
					x.isTap = true;
				} else {
					x.isTap = false;
				}
			});
			this.year=this.weekList[e].year;
			this.month=this.weekList[e].month;
			uni.$emit('dateChange', this.weekList[e]);
		},
		// 回到今天
		toNow(){
			let _index;
			this.weekList.forEach((x, i) => {
				if (x.isNow==0) {
					_index=i;
					x.isTap = true;
				} else {
					x.isTap = false;
				}
			});
			let _sltDate = new Date();
			let _week = _sltDate.getDay()==0?6:_sltDate.getDay()-1;
			let _acDate=new Date(_sltDate.getTime()-(1000 * 60 * 60 * 24 * _week));
			this.scId='item-'+(_acDate.getMonth()+1)+'-'+_acDate.getDate()
			uni.$emit('dateChange', this.weekList[_index]);
		},
		// 滚动清空scrollId
		scDate(){
			this.scId=''
		}
	},
	created() {
		uni.showLoading({
			title:'正在加载课表...'
		})
		setTimeout(()=>{
			this.getWeekList();
			
		},500)
	}
};
</script>

<style lang="less" >
	.dateBox {
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 240upx;
		.dateYear {
			font-size: 32upx;
			padding: 0 40upx;
			margin-bottom: 30upx;
			display: flex;
			width: 100%;
			.month {
				font-size: 36upx;
			}
			.year{
				flex-grow: 1;
			}
			.toNow{
				font-size: 28upx;
				color: #fbc521;
			}
		}
	}
.dateScrollCnt {
	display: flex;
	// padding: 0 30upx;
	justify-content: space-between;
	.scrollItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
		margin: 0 20upx;
		.week {
			font-size: 28upx;
			color: #9c9c9c;
			margin-bottom: 12upx;
		}
		.day {
			display: block;
			font-size: 28upx;
			width: 50upx;
			height: 50upx;
			text-align: center;
			line-height: 50upx;
			border-radius: 50%;
			margin-bottom: 10upx;
			color: #202932;
		}
		.selectDate {
			background-color: #fbc521;
		}
		.dotted {
			width: 10upx;
			height: 10upx;
			background-color: #ffffff;
			border-radius: 50%;
		}
		.hasCheck {
			background-color: #fbc521;
		}
		.passCheck {
			background-color: #c1c1c1;
		}
	}
}
</style>
